<template>
  <div>
    <el-row class="licc-login-header licc-login-top-row" type="flex" justify="center"  align="middle">
      <el-row type="flex" justify="start" align="middle"  style="width:1100px; background-color: #fff">
        <el-col class="licc-login-top-img" align="left">
          <el-image src="http://lccabc.cn/logo.png" @click.native="homeImageClick" class="licc-login-top-el-image"></el-image>
        </el-col>
        <el-col class="licc-login-top-title" align="left">
          <em>欢迎登录</em>
        </el-col>
        <el-col class="licc-login-top-router-home" align="left">
          <div style="position:absolute;bottom:0;right:0;">
            <router-link :to="{name:'home'}">首页<i class="el-icon-d-arrow-right"></i></router-link>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="licc-login-center licc-login-top-row" type="flex" justify="center">
      <el-col  class="licc-login-center-content">
        <el-row type="flex" justify="center">
          <el-col class="login-container">
            <el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm">
              <el-form-item prop="username">
                <span class="svg-container svg-container_login">
                  <svg-icon icon-class="user"/>
                </span>
                <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="帐号"/>
              </el-form-item>
              <el-form-item prop="password">
                <span class="svg-container">
                  <svg-icon icon-class="password"/>
                </span>
                <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
                          autoComplete="on" placeholder="密码"/>
                <span class="show-pwd" @click="showPwd">
                  <svg-icon icon-class="eye"/>
                </span>
              </el-form-item>
              <el-button type="primary" style="width:100%;margin-bottom:20px;" :loading="loading"
                         @click.native.prevent="handleLogin">登录
              </el-button>
              <div class="licc-login-center-bottom">
                <router-link :to="{name:'register'}">忘记密码</router-link> 或
                <router-link :to="{name:'reset'}">立即注册</router-link>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="licc-login-footer" type="flex" justify="center">
      <el-col class="licc-login-footer-content">
        <l-bottom></l-bottom>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import LBottom from '../layout/components/LBottom'
  export default {
    name: 'login',
    components: {
      LBottom
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        const usernameRegex = /^1[34578]\d{9}$/
        if (value === ''){
          callback(new Error('请输入手机号码'))
        }
        if (!usernameRegex.test(value)) {
          callback(new Error('请输入正确的手机号码'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,16}$/
        if (!passwordRegex.test(value)) {
          callback(new Error('密码8-16个字符，至少1个大写字母，1个小写字母和1个数字,不包含空格'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {},
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}]
        },
        passwordType: 'password',
        loading: false,
      }
    },

    methods: {
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
              this.loading = false
              this.$router.push({path: '/'})
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      homeImageClick(){
        this.$router.push({name:'home'});
      }
    }
  }
</script>
<style>
  .licc-login-header{
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 110px;
  }
  .licc-login-top-row{
    width: 100%;
  }
  .licc-login-center{
    height: 407px;
  }
  .licc-login-footer{
    height: 118px;
  }
  .licc-login-center-content{
    width: 1100px;
  }
  .licc-login-top-img{
    width: 240px;
  }
  .licc-login-top-el-image{
    width: 239px;
    height: 51px;
    cursor: pointer;
  }
  .licc-login-top-title{
    width: 240px;
    padding-left: 20px;
    line-height: 55px;
    letter-spacing: 3px;
    font-weight: 800;
    color: #67547b;;
    font-size: 22px;
  }
  .licc-login-top-router-home{
    height: 100px;
    width: 620px;
    text-align: right;
  }
  .licc-login-top-router-home a{
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    font-size: 14px;
    color: #666;
  }
  .licc-login-top-router-home a:hover{
    color: #409EFF;
  }
  .licc-login-center-bottom{
    text-align: right;
    font-size: 12px;
  }
  .licc-login-center-bottom a{
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    color: #666;
  }
  .licc-login-center-bottom a:hover{
    color: #409EFF;
  }
  .licc-login-footer-content{
    /*border-top: solid 1px #e6e6e6;*/
    /*width: 1100px;*/

  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #2d3a3b;
  $light_gray: #eee;

  /* reset element-ui css */
  .login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: $light_gray;
    height: 47px;
  &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
     -webkit-text-fill-color: #fff !important;
   }
  }
  }
  .el-form-item {
    border: 1px solid rgb(220, 223, 230);
    background: #FAFFFF;
    border-radius: 5px;
    color: #454545;
  }
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 35px 35px 15px 35px;
    margin: 100px auto;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
  span {
  &:first-of-type {
     margin-right: 16px;
   }
  }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  &_login {
     font-size: 20px;
   }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
</style>

